<template>
  <div>
    <h1>App</h1>
    firstName：{{ firstName }}
    <br>
    lastName：{{ lastName }}
    <button @click="lastName = 'lili'">lastName="lili"</button>
    <hr>
    fullName：{{ fullName }}
    <button @click="fullName = 'lili zhang'">fullName="lili zhang"</button>

  </div>
</template>
<script setup>
import { computed, ref } from 'vue';

const firstName = ref('li')
const lastName = ref('jack')
const fullName = computed({
  get() {
    return `${lastName.value} ${firstName.value}`
  },
  set(value) {
    [lastName.value, firstName.value] = value.split(' ')
  }
})
// const fullName = computed(() => {
//   return `${lastName.value} ${firstName.value}`
// });


</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>